<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        .wrong {
            border: 2px solid red;
        }
        .right {
            border: 2px solid #91B81D;
        }
        span{
        	color: red;
        	display: none;
        }
    </style>
	</head>
	<body>
		账号：<input id="username" type="text" />
		<span id="username-span">账号长度应在6-12个字符之间</span><br><br>
    	密码：<input id="password" type="password"/>
		<span id="password-span">密码长度应在6-12个字符之间</span>
	</body>
	<script>
		var user = document.getElementById("username");
		var pass = document.getElementById("password");
		var userSpan = document.getElementById("username-span");
		var passSpan = document.getElementById("password-span");
		
		function validateInput(input, span) {
			if (input.value.length >= 6 && input.value.length <= 12) {
				input.classList.remove("wrong");
				input.classList.add("right");
				span.style.display = 'none';
			} else {
				input.classList.remove("right");
				input.classList.add("wrong");
				span.style.display = 'inline';
			}
		}
		
		user.onblur = function() {
			validateInput(user, userSpan);
		};
		
		pass.onblur = function() {
			validateInput(pass, passSpan);
		};
	</script>
</html>